<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表</title>
	<style>
		.box{
			width: 100px;
			height: 100px;
			border: 1px solid #000;
			float: left;
			margin-left: 10px;
			font-size: 30px;
			color: red;
			text-align: center;
			line-height: 100px;
		}
	</style>
</head>
<body>
	<div id="h" class="box"></div>
	<div id="m" class="box"></div>
	<div id="s" class="box"></div>

	<script>
		var hour;//计算用 时
		var minute;//计算用 分
		var second;//计算用 秒
		var moretime;//多出的时间
		var time;//现在的时间戳

		var h = document.getElementById('h');
		var m = document.getElementById('m');
		var s = document.getElementById('s');

		timer = setInterval('start()',1000);

		function start(){

            if (time == 0) {
                //清除定时  到0时停止
                clearInterval(timer);
              
            }

            var date = new Date();

            time = date.getHours()*3600+date.getMinutes()*60+date.getSeconds();
            hour = (time-(time%3600))/3600;
            moretime = time%3600;
            second = time % 60;
            minute = (moretime-second)/60;

            if(minute<10){
            	minute = '0' + minute;
            }

            if(second<10){
            	second = '0' + second;
            }

            h.innerHTML = hour;
            m.innerHTML = minute;
            s.innerHTML = second;
           
            time--;
        }

	</script>
</body>
</html>